<template>
  <div class="box">
    <div class="loginBox">
      <h1>登录账号</h1>
      <h2>虾米严选商城欢迎你</h2>
      <inputComps
        @input="phonebtn"
        :class="reg == 0 ? '' : reg == 1 ? 'active' : 'active1'"
        typeS="text"
        v-model="phone"
        place="手机号码"
      >
        <u>
          <b v-if="reg == 2"> 必填 </b>
          <van-icon name="phone-o" />
        </u>
      </inputComps>
      <inputComps
        @input="passwordBlur"
        :typeS="pas"
        v-model="password"
        place="密码"
        :class="
          passwordFlag == 0 ? '' : passwordFlag == 1 ? 'active' : 'active1'
        "
      >
        <u>
          <van-icon @click="showPassword" :name="eye" />
        </u>
      </inputComps>
      <button @click="loginBtn">登录</button>
      <p>忘记密码</p>
      <p>
        <router-link to="/register"> 还没有注册？立即注册</router-link>
      </p>
    </div>
  </div>
</template>

<script>
import inputComps from "../login/inputComps.vue";
import { ref } from "vue";
import { useLogin } from "@/api";
import { useRoute, useRouter } from "vue-router";
import { Toast } from "vant";
export default {
  setup(props) {
    let phone = ref("13500000000");
    let password = ref("");
    // 手机号和密码数据
    let pas = ref("password");
    let eye = ref("closed-eye");
    // 类型切换和小眼睛
    let off = ref(false);
    let reg = ref(0); // 正则手机号
    let passwordFlag = ref(0); // 正则密码

    let route = useRoute();
    let router = useRouter();
    // 登录验证
    async function loginBtn() {
      console.log('diwa',passwordFlag.value)
      if (passwordFlag.value == 2 || reg.value == 2) {
        Toast.fail("请输入正确的账号或者密码");
        return;
      } 
      if (password.value.trim() == "" || phone.value.trim() == "") {
        Toast.fail("你的账号或者密码为空");
        return;
      }
      console.log(phone.value, password.value);
      let reslute = await useLogin(phone.value, password.value);
      console.log("idaw", reslute);
      if (reslute.code == 500 || reslute.code == 501) {
        Toast.fail(`${reslute.msg}`);
        return;
      }
      if (reslute.code == 0) {
        let { data } = reslute;
        localStorage.setItem("token", data.token); // 将token存储到本地
        if (route.query.id) {
          // 若果路由有id表示详情页跳过来
          router.push({
            path: "/details",
            query: {
              show: true,
              id: route.query.id,
              //  id 再给详情传过去   show 是上来展示一下弹框
            },
          });
        }
        router.go(-1);
        Toast.success(`${reslute.msg}`);
      }
    }

    function showPassword() {
      // 是否看见密码
      if (eye.value == "eye-o" && pas.value == "text") {
        eye.value = "closed-eye";
        pas.value = "password";
      } else {
        eye.value = "eye-o";
        pas.value = "text";
      }
    }
    showPassword();

    function phonebtn() {
      //手机正则
      const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (phoneReg.test(phone.value)) {
        reg.value = 1;
      } else {
        reg.value = 2;
      }
      if (phone.value.trim() == "") {
        reg.value = 0;
      }
      console.log(reg.value);
    }
    phonebtn();

    // 密码正则
    function passwordBlur() {
      // "大写字母，小写字母，数字，特殊符号 `@#$%^&*`~()-+=` 中任意3项密码"
      const passwordReg =
        /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/;
      if (passwordReg.test(password.value)) {
        passwordFlag.value = 1;
      } else {
        passwordFlag.value = 2;
      }
      if (password.value.trim() == "") {
        passwordFlag.value = 0;
      }

      console.log(passwordFlag.value);
    }

    return {
      loginBtn,
      password,
      phone,
      off,
      pas,
      eye,
      showPassword,
      phonebtn,
      reg,
      passwordBlur,
      passwordFlag,
    };
  },
  components: { inputComps },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 60px;
}
.iphone {
  width: 100%;
  height: 90px;
  border-radius: 16px;
  background-color: red;
}
.active {
  border: 0.01rem solid rgb(56, 219, 36);
  background: rgb(225, 255, 223);
}
.active1 {
  border: 0.01rem solid rgb(225, 44, 30);
  background: rgb(255, 233, 228);
}
.loginBox {
  border: 1px solid rgb(207, 205, 205);
  height: 100%;
  padding: 40px;
  p {
    font-size: 26px;
    margin: 50px 0;
    text-align: center;
    color: rgb(139, 138, 138);
    &:nth-of-type(2) {
      color: #549ff9;
    }
  }
  h2 {
    font-size: 26px;
    margin: 40px 0;
    color: rgb(124, 123, 123);
  }
  button {
    width: 5.2rem;
    height: 85px;
    display: block;
    margin: 20px auto;
    outline: none;
    color: #fff;
    text-transform: uppercase;
    background-image: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
    box-shadow: 0 5px 3px #ccc;
    border: 0;
    font-size: 27px;
    text-align: center;
    border-radius: 10px;
  }
  input {
    margin: 20px 0;
    width: 100%;
    border-radius: 8px;
    outline: none;
    border: 0;
    height: 60px;
  }

  u {
    position: absolute;
    top: 35%;
    right: 30px;
    font-size: 28px;
  }
}
</style>
